<template>
	<div class="box">
		<van-form @failed="onFailed" class="form-validate">
			<van-cell-group inset>
				<van-field
					v-model="addUserForm.aa"
					name="aa"
					label="用户姓名"
					required
					clearable
					input-align="right"
					placeholder="请输入"
					:rules="[{ pattern, message: '请输入用户姓名' }]"
				/>
				<van-field
					v-model="addUserForm.bb"
					name="bb"
					label="用户工号"
					required
					clearable
					input-align="right"
					placeholder="请输入"
					:rules="[{ pattern, message: '请输入用户工号' }]"
				/>
				<van-field
					v-model="addUserForm.cc"
					name="cc"
					label="部门"
					input-align="right"
					required
					clearable
					is-link
					readonly
					placeholder="请选择"
					@click="showPicker = true"
					:rules="[{ pattern, message: '请选择部门' }]"
				/>
				<van-field
					v-model="addUserForm.dd"
					name="dd"
					label="机构"
					input-align="right"
					required
					clearable
					is-link
					readonly
					placeholder="请选择"
					@click="showPicker = true"
					:rules="[{ pattern, message: '请选择机构' }]"
				/>
				<VantPicker
					v-model:modelLabel="addUserForm.ee"
					v-model:modelValue="addUserForm.eeCode"
					label="角色"
					placeholder="请选择"
					:required="true"
					:columns="sexList"
					:checkrule="[{ required: true, message: '请选择角色' }]"
				/>
				<van-field
					v-model="addUserForm.ff"
					name="ff"
					label="邮箱"
					required
					clearable
					input-align="right"
					placeholder="请输入"
					:rules="[{ pattern, message: '请输入邮箱' }]"
				/>
				<VantPicker
					v-model:modelLabel="addUserForm.gg"
					v-model:modelValue="addUserForm.ggCode"
					label="性别"
					placeholder="请选择"
					:required="true"
					:columns="sexList"
					:checkrule="[{ required: true, message: '请选择性别' }]"
				/>
				<van-field
					v-model="addUserForm.hh"
					name="hh"
					label="出生日期"
					input-align="right"
					required
					clearable
					is-link
					readonly
					placeholder="请选择"
					@click="showPicker = true"
					:rules="[{ pattern, message: '请选择出生日期' }]"
				/>

				<van-field
					v-model="addUserForm.ii"
					name="ii"
					label="统一认证号"
					required
					clearable
					input-align="right"
					placeholder="请输入"
					:rules="[{ pattern, message: '请输统一认证号' }]"
				/>
				<VantPicker
					v-model:modelLabel="addUserForm.jj"
					v-model:modelValue="addUserForm.jjCode"
					label="是否离职"
					placeholder="请选择"
					:required="true"
					:columns="cities"
					:checkrule="[{ required: true, message: '请选择是否离职' }]"
				/>
			</van-cell-group>
			<div style="margin: 16px">
				<van-button round block type="primary" native-type="submit"> 提交 </van-button>
			</div>
		</van-form>
	</div>
</template>
<script setup>
	const pattern = ref(/\d{6}/);
	const addUserForm = ref({
		aa: "",
		bb: "",
		cc: "",
		dd: "",
		ee: "",
		eeCode: "",
		ff: "",
		gg: "",
		hh: "",
		ii: "",
		jj: "",
		ggCode: "",
		jjCode: "",
	});
	const sexList = [
		{
			text: "男",
			value: "1",
		},
		{
			text: "女",
			value: "2",
		},
	];
	const cities = [
		{ text: "北京", value: "beijing" },
		{ text: "上海", value: "shanghai" },
	];
	const validatePicker = () => {
		console.log("122221");
	};
	const onFailed = (errorInfo) => {
		console.log(addUserForm.value, "111");
		// const isValid = checkRequired(addUserForm.value.jj);
		console.log(errorInfo, "errorInfo");
	};
</script>
<style scoped lang="scss">
	.box {
		padding-top: 8px;
		.van-form .van-cell-group .van-cell {
			font-size: 16px;
			height: 56px;
			align-items: center;
		}
	}
</style>
